<template>
  <div class="caseAnalysis1">
    <div class="caseAnalysis1_top">
      <div>罚没金额统计</div>
      <a class="changeStartDate">选择起始日期</a>
    </div>
    <div class="caseAnalysis1_buttom">
      <div class="caseAnalysis1_buttom_left">
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          stripe
          class="customer-table"
          :header-cell-style="{ background: '#3F5270', color: '#fff' }"
        >
          <el-table-column prop="id" label="序号" width="50"> </el-table-column>
          <el-table-column prop="date" label="案发时间"> </el-table-column>
          <el-table-column prop="name" label="所属领域" width="70">
          </el-table-column>
          <el-table-column prop="address" label="案件状态" width="70">
          </el-table-column>
        </el-table>
      </div>
      <div class="caseAnalysis1_buttom_right">
        <ul class="caseAnalysis1_buttom_rightUL">
          <li class="li_one" v-for="(item, i) in liArr" :key="i">
            <div>{{ item.text }}</div>
            <span :style='{color:item.content=="点击输入金额..."?"#A47434":""}' class="content">{{ item.content }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2021-6-23 10:30:35",
          name: "农业农村",
          address: "新案情",
          id: 1,
        },
        {
          date: "2021-6-24 10:30:35",
          name: "卫生健康",
          address: "新案情",
          id: 2,
        },
        {
          date: "2021-6-25 10:30:35",
          name: "市场监管",
          address: "新案情",
          id: 3,
        },
        {
          date: "2021-6-27 10:30:35",
          name: "综合执法",
          address: "予以立案",
          id: 4,
        },
        {
          date: "2021-6-28 10:30:35",
          name: "卫生健康",
          address: "予以立案",
          id: 5,
        },
      ],
      liArr: [
        { text: "案件来源类型：", content: "检查巡查发现" },
        { text: "紧急级别：", content: "普通" },
        { text: "案件标题：", content: "占到经营" },
        { text: "专业类型：", content: "城市管理" },
        { text: "案值(元)：", content: "点击输入金额..." },
        { text: "案件时间：", content: "2021-6-27 10:30:25" },
        { text: "案件地点：", content: "四川省宜宾市长宁县某某广场123号" },
        { text: "案件区域：", content: "四川省宜宾市长宁县" },
      ],
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else if (rowIndex % 2 == 1) {
        return "success-row";
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.caseAnalysis1 {
  width: 700px;
  background: url("../../assets/dapin/3/1.png") #0e1525 no-repeat;
  color: #fff;
  padding-top: 30px;
  .caseAnalysis1_top {
    padding-left: 15px;
    display: flex;
    margin-bottom: 20px;
    div {
      margin-right: 20px;
    }
    .changeStartDate {
      color: #64d0dc;
      text-decoration: underline;
    }
  }
  .caseAnalysis1_buttom {
    width: 700px;
    display: flex;
    .caseAnalysis1_buttom_left {
      padding-left: 15px;
      width: 50%;

      /deep/ .el-table,
      /deep/ .el-table__expanded-cell {
        background-color: #0a101c;
      }
      /* 表格内背景颜色 */
      /deep/ .el-table th {
        background-color: #0a101c;
        color: #fff;
        :hover {
          background-color: #0a101c;
        }
      }
      /deep/.el-table .el-table__row {
        border: 0;
      }

      // 去掉表格单元格边框
      /deep/.customer-table th {
        border: none;
      }
      /deep/.customer-table td,
      /deep/.customer-table th.is-leaf {
        border: none;
      }
      // 表格最外边框
      /deep/.el-table--border,
      /deep/.el-table--group {
        border: none;
      }
      // 头部边框
      .customer-table thead tr th.is-leaf {
        border: 1px solid #ebeef5;
        border-right: none;
      }
      .customer-table thead tr th:nth-last-of-type(2) {
        border-right: 1px solid #ebeef5;
      }
      // 表格最外层边框-底部边框
      .el-table--border::after,
      .el-table--group::after {
        width: 0;
      }
      .customer-table::before {
        width: 0;
      }
      .customer-table .el-table__fixed-right::before,
      .el-table__fixed::before {
        width: 0;
      }
      // 表格有滚动时表格头边框
      .el-table--border th.gutter:last-of-type {
        border: 1px solid #ebeef5;
        border-left: none;
      }

      /deep/ .el-table .success-row {
        background: #0c1c1d;
        // color: #fff;
      }
      /deep/ .el-table .warning-row {
        background: #273244;
        color: #fff;
        // :hover .el-table__body tr > td {
        //   background: #273244;
        //   // color: #fff;
        // }

        //   /deep/ .el-table__body tr:hover > td {
        //     background-color: #e1e7f0 !important;
        //   }

        //  /deep/ .el-table__body tr.current-row > td {
        //     background-color: #e1e7f0 !important;
        //   }
      }
    }
    .caseAnalysis1_buttom_right {
      // margin-left: 10px;
      width: 49%;
      .caseAnalysis1_buttom_rightUL {
        list-style: none;
        // display: flex;
        padding-left: 0;
        .li_one {
          display: flex;
          margin-bottom: 8px;
          div {
            width: 112px;
            text-align: right;
            font-size: 14px;
          }
          .content {
            font-size: 14px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>